<template>
  <div class="page-account">
    <div class="container" :class="[fullWidth > 768 ? 'containerSamll' : 'containerBig']">
      <swiper :options="swiperOption" class="swiperPross" v-if="fullWidth > 768">
        <swiper-slide class="swiperPic" v-for="(item, index) in swiperList" :key="index">
          <!-- <img :src="item.slide" alt="" /> -->
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="index_from page-account-container from-wh">
        <div class="page-account-top">
          <div class="page-account-top-logo">
            <!-- <img :src="login_logo" alt="logo" style="width: 100%; height: 74px" /> -->
          </div>
        </div>
        <el-form ref="formInline" :model="formInline" :rules="ruleInline" @keyup.enter="handleSubmit('formInline')">
          <el-form-item prop="username">
            <el-input
              type="text"
              v-model="formInline.username"
              prefix="ios-contact-outline"
              placeholder="请输入用户名"
              size="large"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="formInline.password"
              prefix="ios-lock-outline"
              placeholder="请输入密码"
              size="large"
              show-password
            />
          </el-form-item>
          <!-- <el-form-item prop="code">
            <div class="code">
              <el-input
                type="text"
                v-model="formInline.code"
                prefix="ios-keypad-outline"
                placeholder="请输入验证码"
                size="large"
              />
              <img :src="imgcode" class="pictrue" @click="captchas" />
            </div>
          </el-form-item> -->
          <div class="verify">
              <div id="captcha-box"></div>
          </div>
          <el-form-item class="pt10">
            <el-button type="primary" :loading="loading" size="large" @click="handleSubmit('formInline')" class="btn"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>

    <Verify
      @success="success"
      captchaType="blockPuzzle"
      :imgSize="{ width: '330px', height: '155px' }"
      ref="verify"
    ></Verify>
    <div class="footer">
      <div class="pull-right" v-if="copyright">{{ copyright }}</div>
      <div class="pull-right" v-else>
        Copyright © 2014-2023 <a href="https://www.crmeb.com" target="_blank">{{ version }}</a>
      </div>
    </div>
  </div>
</template>
<script>
import { AccountLogin, loginInfoApi } from '@/api/account';
import { getGeetestConfig ,loginAccont,getAdminMenu} from '@/api/all';
import { getWorkermanUrl } from '@/api/kefu';
import { setCookies } from '@/libs/util';
import '@/assets/js/canvas-nest.min';
import Verify from '@/components/verifition/Verify';
import { PrevLoading } from '@/utils/loading.js';
import { formatFlatteningRoutes, findFirstNonNullChildren } from '@/libs/system';
import md5 from "js-md5";
export default {
  components: {
    Verify,
  },
  data() {
    return {
      fullWidth: document.documentElement.clientWidth,
      swiperOption: {
        pagination: '.swiper-pagination',
        autoplay: true,
      },
      loading: false,
      isShow: false,
      autoLogin: true,
      imgcode: '',
      formInline: {
        username: 'test6',
        password: '123456',
      },
      ruleInline: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      login_captcha: 0,
      // jigsaw: null,
      login_logo: '',
      swiperList: [],
      defaultSwiperList: require('@/assets/images/sw.jpg'),
      key: '',
      copyright: '',
      version: '',
      challenge:"",
      seccode:""
    };
  },
  created() {
    const _this = this;
    document.onkeydown = function () {
      if (_this.$route.name === 'login') {
        let key = window.event.keyCode;
        if (key === 13) {
          _this.handleSubmit('formInline');
        }
      }
    };
    window.addEventListener('resize', this.handleResize);
  },
  watch: {
    fullWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          // 打印screenWidth变化的值
          that.timer = false;
        }, 400);
      }
    },
    $route(n) {},
  },
  mounted: function () {
    this.$nextTick(() => {
      // /* eslint-disable */
      let that = this;
      // this.jigsaw = jigsaw.init({
      //   el: this.$refs.captcha,
      //   onSuccess() {
      //     that.modals = false;
      //     that.closeModel();
      //   },
      //   onFail: this.closefail,
      //   onRefresh() {},
      // });
      if (this.screenWidth < 768) {
        document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');
      } else {
        document.getElementsByTagName('canvas')[0].className = 'index_bg';
      }
      this.swiperData();
    });
    this.onInitGeetest(); //初始化
  },
  methods: {

     onInitGeetest() {
      
        getGeetestConfig().then((res) => {
          // 后端地址 initGeetest需要的参数
          const { data } = res;
          // console.log(data);
          initGeetest(
            // initGeetest直接使用就OK了 在main.js里面已经引用到了gt文件了 下面的对象是给initGeetest需要的参数也就是在接口上面获取到的 放进去就OK
            {
              gt: data.gt,
              challenge: data.challenge,
              success: data.success,
              new_captcha: true,
              width: "100%",
            },
            (captchaObj) => {
              // 这里可以调用验证实例 captchaObj 的实例方法
              console.log(captchaObj);
              // 通过调用captchaObj对象的appendTo方法，给某个标签添加上滑动验证对象，就行了，看写法
              captchaObj.appendTo("#captcha-box"); // 参数是一个标签选择器，那么这个标签就加上了滑动验证的页面效果
              captchaObj.onSuccess(() => {
                // 这里是滑动完毕回调
                // 通过这个captchaObj.getValidate()方法，会得到一个自定义对象，这个对象里面有三个数据，将来点击提交按钮的时候，不仅仅要提交用户名和密码，还要将这三个数据提交给后端进行验证
                let result = captchaObj.getValidate();
                console.log(result, "流水号");
                this.challenge = result.geetest_challenge; // 保存这个数据
                this.seccode = result.geetest_seccode; // 保存这个数据
              });
            }
          );
        })
        .catch((err) => {
          console.log(err);
        });
    },
    swiperData() {
      loginInfoApi()
        .then((res) => {
          window.document.title = `${res.data.site_name} - 登录`;
          localStorage.setItem('ADMIN_TITLE', res.data.site_name || '');
          this.$store.commit('setAdminTitle', res.data.site_name);
          let data = res.data || {};
          this.login_logo = data.login_logo ? data.login_logo : require('@/assets/images/logo.png');
          this.swiperList = data.slide.length ? data.slide : [{ slide: this.defaultSwiperList }];
          this.key = data.key;
          this.copyright = data.copyright;
          this.version = data.version;
          this.login_captcha = data.login_captcha;
        })
        .catch((err) => {
          this.$message.error(err);
          this.login_logo = require('@/assets/images/logo.png');
          this.swiperList = [{ slide: this.defaultSwiperList }];
        });
    },
    success(params) {
      this.closeModel(params);
    },
    // 关闭模态框
    closeModel(params) {
      this.isShow = false;
      // noinspection JSVoidFunctionReturnValueUsed

      this.loading = true;
       let data = {
        username: this.formInline.username,
        password: md5(this.formInline.password),
        challenge: this.challenge,
        seccode: this.seccode,
      };

      loginAccont(data).then((res) => { 
        if (res.code == 200) {
            localStorage.token = res.data.token;
            localStorage.avatar = this.imgUrl + res.data.avatar;
            localStorage.username = res.data.username;
            localStorage.chat_id = res.data.chat_id;
            localStorage.crm_role = res.data.crm_role;
            localStorage.department_id = res.data.department_id;
            let expires = this.getExpiresTime(data.expires_time);
            setCookies('token',res.data.token, expires);

            getAdminMenu({
              role_id : 0
            }).then((res) => {
              console.log(res)
              if(res.code == 200) {
                 this.$store.dispatch('routesList/setRoutesList', res.data.list);
                 let arr = res.data.list[0];
                  this.$router.push({
                    path: arr.link,
                  });
              } else {
                this.$message.error(res.msg);
              }
            })

          } else {
            // 获取要删除的元素
            let elementToRemove = document.getElementById("captcha-box");

            // 检查元素是否存在
            if (elementToRemove) {
              // 从父节点中移除元素
              elementToRemove.innerHTML = "";
            } else {
              console.log('Element with id "captcha-box" not found.');
            }
            this.onInitGeetest();
          }
      }).catch((err) => {
        this.$message.error(err);
      });
      
      console.log(12312312)


      return
      AccountLogin({
        account: this.formInline.username,
        pwd: this.formInline.password,
        key: this.key,
        captchaType: 'blockPuzzle',
        captchaVerification: params ? params.captchaVerification : '',
      })
        .then(async (res) => {
          let data = res.data;
          let expires = this.getExpiresTime(data.expires_time);
          // 记录用户登陆信息
          setCookies('uuid', data.user_info.id, expires);
          setCookies('token', data.token, expires);
          setCookies('expires_time', data.expires_time, expires);

          this.$store.commit('userInfo/uniqueAuth', data.unique_auth);
          this.$store.commit('userInfo/userInfo', data.user_info);
          // 保存菜单信息
          this.$store.commit('menus/setopenMenus', []);
          this.$store.commit('menus/getmenusNav', data.menus);
          this.$store.dispatch('routesList/setRoutesList', data.menus);
          let routes = formatFlatteningRoutes(data.menus);
          this.$store.dispatch('routesList/setRoutesList', [
            {
              id: 142,
              code: '',
              name: '首页',
              type: 1,
              pid: 0,
              icon: '',
              // "link": "/"  原来是"/",
              link: '/admin/index',
              path: '',
              status: 1,
              is_show: 1,
              remarks: '',
              sort_num: 0,
              create_time: '2023-07-21 10:24:22',
              level: 1,
            },
            {
              id: 46,
              code: '',
              name: '待办中心',
              type: 1,
              pid: 0,
              icon: '',
              link: '/need',
              path: '',
              status: 1,
              is_show: 1,
              remarks: '',
              sort_num: 2,
              create_time: '2023-07-07 14:03:39',
              level: 1,
              children: [
                {
                  id: 141,
                  code: '',
                  name: '待办中心',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/needCenter',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 1,
                  create_time: '2023-07-19 17:43:18',
                  level: 2,
                },
                {
                  id: 138,
                  code: '',
                  name: '企业认证',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/Enterprise',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 2,
                  create_time: '2023-07-19 17:39:16',
                  level: 2,
                  children: [
                    {
                      id: 406,
                      code: '',
                      name: '查看列表',
                      type: 3,
                      pid: 138,
                      icon: '',
                      link: '',
                      path: '',
                      status: 1,
                      is_show: 1,
                      remarks: '',
                      sort_num: 0,
                      create_time: '2024-06-11 13:46:08',
                      level: 3,
                    },
                  ],
                },
                {
                  id: 139,
                  code: '',
                  name: '个人认证',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/Personal',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 3,
                  create_time: '2023-07-19 17:39:31',
                  level: 2,
                },
                {
                  id: 47,
                  code: '',
                  name: '商品审核',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/Review',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 4,
                  create_time: '2023-07-07 14:04:23',
                  level: 2,
                  children: [
                    {
                      id: 49,
                      code: '',
                      name: '查看列表',
                      type: 3,
                      pid: 47,
                      icon: '',
                      link: '',
                      path: '',
                      status: 1,
                      is_show: 1,
                      remarks: '',
                      sort_num: 0,
                      create_time: '2023-07-07 14:29:48',
                      level: 3,
                    },
                  ],
                },
                {
                  id: 137,
                  code: '',
                  name: '询价记录',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/Inquiry',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 5,
                  create_time: '2023-07-18 18:05:43',
                  level: 2,
                },
                {
                  id: 452,
                  code: '',
                  name: '资产处置',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/Need/Asset',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 6,
                  create_time: '2024-06-22 09:42:35',
                  level: 2,
                },
                {
                  id: 453,
                  code: '',
                  name: '我的求购',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/Request',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 7,
                  create_time: '2024-06-22 09:43:59',
                  level: 2,
                },
                {
                  id: 134,
                  code: '',
                  name: '我的举报',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/Report',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 8,
                  create_time: '2023-07-18 18:03:21',
                  level: 2,
                },
                {
                  id: 133,
                  code: '',
                  name: '用户反馈',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/Feedback',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 9,
                  create_time: '2023-07-18 18:02:51',
                  level: 2,
                },
                {
                  id: 132,
                  code: '',
                  name: '订单已发货',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/Shipped',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 10,
                  create_time: '2023-07-18 17:50:14',
                  level: 2,
                },
                {
                  id: 130,
                  code: '',
                  name: '订单待发货',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/Pending',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 11,
                  create_time: '2023-07-18 17:49:14',
                  level: 2,
                  children: [
                    {
                      id: 407,
                      code: '',
                      name: '查看列表',
                      type: 3,
                      pid: 130,
                      icon: '',
                      link: '',
                      path: '',
                      status: 1,
                      is_show: 1,
                      remarks: '',
                      sort_num: 0,
                      create_time: '2024-06-11 13:50:02',
                      level: 3,
                    },
                  ],
                },
                {
                  id: 128,
                  code: '',
                  name: '订单待支付',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/Payment',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 12,
                  create_time: '2023-07-18 17:47:53',
                  level: 2,
                  children: [
                    {
                      id: 408,
                      code: '',
                      name: '查看列表',
                      type: 3,
                      pid: 128,
                      icon: '',
                      link: '',
                      path: '',
                      status: 1,
                      is_show: 1,
                      remarks: '',
                      sort_num: 0,
                      create_time: '2024-06-11 13:50:18',
                      level: 3,
                    },
                  ],
                },
                {
                  id: 126,
                  code: '',
                  name: '订单待解锁',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/Locked',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 13,
                  create_time: '2023-07-18 17:46:35',
                  level: 2,
                  children: [
                    {
                      id: 409,
                      code: '',
                      name: '查看列表',
                      type: 3,
                      pid: 126,
                      icon: '',
                      link: '',
                      path: '',
                      status: 1,
                      is_show: 1,
                      remarks: '',
                      sort_num: 0,
                      create_time: '2024-06-11 13:50:35',
                      level: 3,
                    },
                  ],
                },
                {
                  id: 502,
                  code: '',
                  name: '我要招聘',
                  type: 1,
                  pid: 46,
                  icon: '',
                  link: '/need/Recruit',
                  path: '',
                  status: 1,
                  is_show: 1,
                  remarks: '',
                  sort_num: 14,
                  create_time: '2024-09-09 13:40:45',
                  level: 2,
                },
              ],
            },
          ]);
          let arr = formatFlatteningRoutes(this.$router.options.routes);
          this.formatTwoStageRoutes(arr);
          this.$store.commit('menus/setOneLvMenus', arr);

          this.$store.commit('menus/setOneLvRoute', routes);
          // 记录用户信息
          this.$store.commit('userInfo/name', data.user_info.account);
          this.$store.commit('userInfo/avatar', data.user_info.head_pic);
          this.$store.commit('userInfo/access', data.unique_auth);
          this.$store.commit('userInfo/logo', data.logo);
          this.$store.commit('userInfo/logoSmall', data.logo_square);
          this.$store.commit('userInfo/version', data.version);
          this.$store.commit('userInfo/newOrderAudioLink', data.newOrderAudioLink);
          this.login_captcha = 0;
          try {
            if (data.queue === false) {
              this.$notify.warning({
                title: '温馨提示',
                dangerouslyUseHTMLString: true,
                message:
                  '您的【消息队列】未开启，没有开启会导致异步任务无法执行。请尽快执行命令开启！！<a href="https://doc.crmeb.com/single/crmeb_v4/7217" target="_blank">点击查看开启方法</a>',
                duration: 30000,
              });
            }
            if (data.timer === false) {
              this.$notify.warning({
                title: '温馨提示',
                dangerouslyUseHTMLString: true,
                message:
                  '您的【定时任务】未开启，没有开启会导致自动收货、未支付自动取消订单、订单自动好评、拼团到期退款等任务无法正常执行。请尽快执行命令开启！！<a href="https://doc.crmeb.com/single/crmeb_v4/7211" target="_blank">点击查看开启方法</a>',
                duration: 30000,
              });
            }

            this.checkSocket();
          } catch (e) {}
          PrevLoading.start();
          return this.$router.push({
            path: res.data.menus.length ? findFirstNonNullChildren(res.data.menus).path : this.$routeProStr + '/',
          });
        })
        .catch((res) => {
          let data = res === undefined ? {} : res;
          this.$message.error(data.msg || '登录失败');
          this.login_captcha = res.data.login_captcha;
        });
      setTimeout((e) => {
        this.loading = false;
      }, 1000);
    },
    formatTwoStageRoutes(arr) {
      if (arr.length <= 0) return false;
      const newArr = [];
      const cacheList = [];
      arr.forEach((v) => {
        if (v && v.meta && v.meta.keepAlive) {
          newArr.push({ ...v });
          cacheList.push(v.name);
          this.$store.dispatch('keepAliveNames/setCacheKeepAlive', cacheList);
        }
      });
      return newArr;
    },
    checkSocket() {
      getWorkermanUrl().then((res) => {
        let url = res.data.admin;
        let isNotice = false;
        let socket = new WebSocket(url);
        socket.onopen = () => {
          isNotice = true;
          socket.close();
        };
        socket.onerror = (err) => {
          if (!isNotice) {
            isNotice = true;
            this.$notify.warning({
              title: '温馨提示',
              message:
                '您的【长连接】未开启，没有开启会导致系统默认客服无法使用,后台订单通知无法收到。请尽快执行命令开启！！<a href="https://doc.crmeb.com/single/crmeb_v4/7219" target="_blank">点击查看开启方法</a>',
              dangerouslyUseHTMLString: true,
              duration: 30000,
            });
          }
        };
        socket.onclose = (err) => {
          if (!isNotice) {
            isNotice = true;
            this.$notify.warning({
              title: '温馨提示',
              message:
                '您的【长连接】未开启，没有开启会导致系统默认客服无法使用,后台订单通知无法收到。请尽快执行命令开启！！<a href="https://doc.crmeb.com/single/crmeb_v4/7219" target="_blank">点击查看开启方法</a>',
              dangerouslyUseHTMLString: true,
              duration: 30000,
            });
          }
        };
      });
    },
    getExpiresTime(expiresTime) {
      let nowTimeNum = Math.round(new Date() / 1000);
      let expiresTimeNum = expiresTime - nowTimeNum;
      return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
    },

    closefail() {
      // if (this.jigsaw) this.jigsaw.reset();
      this.$message.error('校验错误');
    },
    handleResize(event) {
      this.fullWidth = document.documentElement.clientWidth;
      if (this.fullWidth < 768) {
        document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');
      } else {
        document.getElementsByTagName('canvas')[0].className = 'index_bg';
      }
    },
    handleSubmit(name) {
      // console.log(111111);
      // this.$router.push({
      //   path: '/admin/index',
      // });
      // console.log(222222);
      // return;

     
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.login_captcha == 1) {
            this.$refs.verify.show();
          } else {
             if(!this.challenge && !this.seccode) {
                this.$message.error("请点击按钮进行验证！");
                return;
              }
            this.closeModel();
          }
        }
      });
    },
  },
  beforeCreate() {
    if (this.fullWidth < 768) {
      document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');
    } else {
      document.getElementsByTagName('canvas')[0].className = 'index_bg';
    }
  },
  beforeDestroy: function () {
    window.removeEventListener('resize', this.handleResize);
    document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');
  },
};
</script>
<style scoped lang="stylus">
 .verify {
      background: #fff;
      height: 44px;
    
  }
.page-account {
  display: flex;
  width: 100%;
  background-image: url('../../../assets/images/bg.jpg');
  background-size: cover;
  background-position: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: auto;
}

.page-account .code {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-account .code .pictrue {
  height: 40px;
}

.swiperPross {
  border-radius: 12px 0px 0px 12px;
}

.swiperPross, .swiperPic, .swiperPic img {
  width: 510px;
  height: 100%;
}

.swiperPic img {
  width: 100%;
  height: 100%;
}

.container {
  height: 400px !important;
  padding: 0 !important;
  border-radius: 12px;
  z-index: 1;
  display: flex;
}

.containerSamll {
  /* width: 56% !important; */
  /* background: #fff !important; */
}

.containerBig {
  width: auto !important;
  background: #f7f7f7 !important;
}

.index_from {
  padding: 32px 40px 32px 40px;
  height: 400px;
  box-sizing: border-box;
}

.page-account-top {
  padding: 20px 0 24px 0 !important;
  box-sizing: border-box !important;
  display: flex;
  justify-content: center;
}

.page-account-container {
  border-radius: 0px 6px 6px 0px;
}

.btn {
  width: 100%;
  background: linear-gradient(90deg, rgba(25, 180, 241, 1) 0%, rgba(14, 115, 232, 1) 100%) !important;
}

.captchaBox {
  width: 310px;
}

input {
  display: block;
  width: 290px;
  line-height: 40px;
  margin: 10px 0;
  padding: 0 10px;
  outline: none;
  border: 1px solid #c8cccf;
  border-radius: 4px;
  color: #6a6f77;
}

#msg {
  width: 100%;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
}

a:link, a:visited, a:hover, a:active {
  margin-left: 100px;
  color: #0366D6;
}

.index_from ::v-deep .ivu-input-large {
  font-size: 14px !important;
}

.from-wh {
  width: 400px;
}

.pull-right {
  float: right !important;
}

::v-deep .el-button--primary {
  border: none;
}

::v-deep .el-button {
  padding: 13px 20px !important;
}

.pull-right {
  float: right !important;
  color: #666;
}

.pull-right a {
  margin-left: 0;
  color: #666;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.8);
  border-top: 1px solid #e7eaec;
  overflow: hidden;
  padding: 10px 20px;
  height: 36px;
  line-height: 18px;
  z-index: 999;
}
</style>
